<%--
  Created by IntelliJ IDEA.
  User: oddDog
  Date: 2021/7/9
  Time: 11:31
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="./js/bootstrap.min.js"></script>
</head>
<body style="padding-left: 30px">
<h1>
    亲爱的${cookie.name.value} ，欢迎您！&nbsp;&nbsp;&nbsp;
    <span id="count">当前在线人数:${applicationScope.count}</span>
</h1><br>
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal" id="add">添加</button>&nbsp;&nbsp;
<button id="select" class="btn btn-default">查询</button>
<input id="selectText" type="text" placeholder="请输入班级编号">&nbsp;&nbsp;
<button class="btn btn-warning"><a href="pageStudent">学员管理</a></button>
<br><br>
<!-- 表格开始 -->
<table class="table table-hover">
    <thead>
    <tr>
        <th>班级编号</th>
        <th>班级名称</th>
        <th>年级</th>
        <th>班主任</th>
        <th>口号</th>
        <th>人数</th>
    </tr>
    </thead>
    <tbody>
    <c:forEach items="${classList}" var="classes">
        <tr>
            <td>${classes.id}</td>
            <td>${classes.className}</td>
            <td>${classes.grade}</td>
            <td>${classes.teacher}</td>
            <td>${classes.slogan}</td>
            <td>${classes.total}</td>
            <td>
                <button class="btn btn-warning update" data-toggle="modal" data-target="#myModal">修改</button>
                <button class="btn btn-danger delete">删除</button>
            </td>
        </tr>
    </c:forEach>
    </tbody>
</table>
<!-- 表格结束 -->
<!-- 添加模态框开始 -->
<div class="modal" id="myModal" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
                <h4 class="modal-title" id="title"></h4>
            </div>
            <form action="addAndUpdateClass" method="post" id="frm">
                <div class="modal-body">
                    <input type="hidden" name="id" id="frm_id">
                    班级名称
                    <input type="text" name="className" id="frm_className">
                    年&nbsp;&nbsp;级
                    <input type="text" name="grade" id="frm_grade">
                    <br><br>
                    班&nbsp;&nbsp;主&nbsp;&nbsp;任
                    <input type="text" name="teacher" id="frm_teacher">
                    口&nbsp;&nbsp;号
                    <input type="text" name="slogan" id="frm_slogan">
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">保存</button>
                    <button class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- 添加模态框结束 -->
<script>
    $(function () {
        // 添加
        $("#add").click(function () {
            $("#title").html("创建班级")
            // 清空模态框表单中的数据
            $("#frm_id").val("")
            $("#frm_className").val("")
            $("#frm_grade").val("")
            $("#frm_teacher").val("")
            $("#frm_slogan").val("")
        })

        // 修改
        $(".update").click(function (event) {
            $("#title").html("修改班级")
            // 获取所在行的数据
            let tds = event.currentTarget.parentElement.parentElement.getElementsByTagName("td")
            // 将所在行的数据填充到模态框表单中
            $("#frm_id").val(tds[0].innerText)
            $("#frm_className").val(tds[1].innerText)
            $("#frm_grade").val(tds[2].innerText)
            $("#frm_teacher").val(tds[3].innerText)
            $("#frm_slogan").val(tds[4].innerText)
        })

        // 查询
        $("#select").click(function () {
            let val = $("#selectText").val().trim();
            if (val === "") {
                window.location.href = "classes"
            } else if (!/^\d+$/.test(val)) {
                alert("请输入正确数字！！！")
            } else {
                window.location.href = "classes?id=" + val
            }
        })

        // 删除
        $(".delete").click(function (event) {
            // 获取所在行的id值
            let id = event.currentTarget.parentElement.parentElement.getElementsByTagName("td")[0].innerText
            if (window.confirm("你确定要删除编号为" + id + "的班级吗?")) {
                window.location.href = "delClass?id=" + id;
            }
        })
    })
</script>
</body>
</html>
